<script lang="ts">
export default {
  name: "xt-date-picker",
};
</script>

<script setup lang="ts">
import { ElDatePicker } from "element-plus";
import Typings from "../../../typings";

interface Props extends /* @vue-ignore */ Typings.DatePicker.props {
  placeholder: Typings.DatePicker.props["placeholder"];
  startPlaceholder: Typings.DatePicker.props["startPlaceholder"];
  endPlaceholder: Typings.DatePicker.props["endPlaceholder"];
  type: Typings.DatePicker.props["type"];
  format: Typings.DatePicker.props["format"];
  valueFormat: Typings.DatePicker.props["valueFormat"];
}

withDefaults(defineProps<Partial<Props>>(), {
  placeholder: "请选择时间",
  startPlaceholder: "请选择开始时间",
  endPlaceholder: "请选择结束时间",
  type: "datetime",
  format: "YYYY-MM-DD HH:mm:ss",
  valueFormat: "x", // 默认时间戳
});
</script>

<template>
  <el-date-picker
    class="xt-date-picker"
    :type="type"
    :format="format"
    :valueFormat="valueFormat"
    :placeholder="placeholder"
    :startPlaceholder="startPlaceholder"
    :endPlaceholder="endPlaceholder"
  >
    <template v-for="(_value, name) in $slots" #[name]="scope" :key="name">
      <slot :name="name" v-bind="scope || {}"></slot>
    </template>
  </el-date-picker>
</template>

<style lang="scss">
@use "../../../scss/xt-date-picker.scss";
</style>
